<template>
  <el-menu :collapse="userstor.menuFold" :collapse-transition="false">
    <template v-for="item in menu" :key="item.menu_id">
      <template v-if="item.children && item.children.length > 0">
        <el-sub-menu :index="item.menu_id + ''">
          <template #title>
            <el-icon>
              <component :is="item.icon" />
            </el-icon>
            <span>{{ item.name }}</span>
          </template>
          <template v-if="item.children && item.children.length > 0">
            <template v-for="items in item.children" :key="items.menu_id">
              <template v-if="items.children && items.children.length > 0">
                <menus :menu="menulist(items)"></menus>
              </template>
              <template v-else>
                <el-menu-item-group>
                  <!-- <el-menu-item index="home" @click="menuClick">首页</el-menu-item> -->
                  <el-menu-item :index="items.uri" @click="menuClick">
                    <el-icon>
                      <component :is="items.icon" />
                    </el-icon>
                    <span>{{ items.name }}</span></el-menu-item>
                </el-menu-item-group>
              </template>
            </template>
          </template>
        </el-sub-menu>
      </template>
      <template v-else>
        <el-menu-item :index="item.uri + ''" @click="menuClick">
          <el-icon>
            <component :is="item.icon" />
          </el-icon>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </template>
    </template>

  </el-menu>
</template>
<script>
export default {
  name: "menus"
}
</script>
<script setup>
import { computed } from "vue";
import { useRouter } from 'vue-router';
import menus from './menus.vue';
import { useStore } from "@/store/main"
const userstor = useStore()

const route = new useRouter()
const menuClick = (e) => {
  // console.log(e)
  route.push(e.index)
}

const props = defineProps({
  menu: {
    type: Object,
    required: true
  }
})
const menulist = (data) => {
  let arr = []
  arr.push(data)
  return arr
}
</script>

<style lang="scss" scoped></style>